import Image from 'next/image';

import zhTwTranslations from '@/messages/zh-TW.json';

export default function ZhTwHomePage() {
  const translations = zhTwTranslations;

  return (
    <main className="relative min-h-screen">
      <section className="relative h-[80vh] w-full flex items-center justify-center">
        <Image
          src="/shenzhen-bay-port.jpg"
          alt="Shenzhen Bay Port"
          fill
          className="z-0 object-cover"
        />
        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
        <div className="relative z-20 text-white text-center p-6">
          <h1 className="text-5xl md:text-6xl font-bold leading-tight drop-shadow-lg">
            {translations.hero_title}
          </h1>
          <p className="mt-4 max-w-lg mx-auto text-lg drop-shadow-lg">
            {translations.hero_description}
          </p>
          <div className="mt-8 flex gap-4 justify-center">
            <button className="bg-yellow-500 text-black px-8 py-3 rounded-md font-semibold hover:bg-yellow-600 transition-colors">
              {translations.book_now}
            </button>
            <button className="border-2 border-yellow-500 text-yellow-500 px-8 py-3 rounded-md font-semibold hover:bg-yellow-500 hover:text-black transition-colors">
              {translations.book_car}
            </button>
          </div>
        </div>
      </section>
      <section className="relative bg-white z-20 -mt-20 transform -skew-y-3">
        <div className="container mx-auto px-6 py-20 transform skew-y-3">
          <div className="text-center">
            <h2 className="text-4xl font-bold text-gray-800">
              {translations.content_title}
            </h2>
          </div>
        </div>
      </section>
    </main>
  );
}
